﻿@page "/employeerecords"
@inject HttpClient Http
@using BlazorCRUD.Share.Models

<h1>Employee Data</h1>

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <button class="btn btn-primary" data-toggle="modal" data-target="#AddEditEmpModal" onclick="@AddEmployee">
                <i class="fa fa-user-plus"></i>Add Employee
            </button>
        </div>
        <div class="input-group col-md-4 offset-md-5">
            <input type="text" class="form-control" placeholder="Search Employee" bind="@searchString" />
            <div class="input-group-append">
                <button class="btn btn-info" onclick="@SearchEmployee">
                    <i class="fa fa-search"></i>
                </button>

            </div>
        </div>
    </div>
</div>
<br />

<div class="modal fade" id="AddEditEmpModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">@modalTitle</h3>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">X</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label class="control-label">Name</label>
                        <input class="form-control" bind="@emp.EmployeeName" />
                    </div>
                    <div class="form-group">
                        <div class="form-group">
                            <label class="control-label">Gender</label>
                            <select class="form-control" bind="@emp.Gender">
                                <option value="">-- Select Gender --</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Designation</label>
                            <input class="form-control" bind="@emp.Designation" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">City</label>
                            <select class="form-control" bind="@emp.CityName">
                                <option value="">-- Select City ---</option>
                                @foreach (var city in cityList)
                                {
                                    <option value="@city.CityName">@city.CityName</option>
                                }
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-block btn-success" onclick="@(async ()=> await SaveEmployee())" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteEmpModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Confirm Delete!!!</h3>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span></button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <tr>
                        <td>Name</td>
                        <td>@emp.EmployeeName</td>
                    </tr>
                    <tr>
                        <td>Gender</td>
                        <td>@emp.Gender</td>
                    </tr>
                    <tr>
                        <td>Designation</td>
                        <td>@emp.Designation</td>
                    </tr>
                    <tr>
                        <td>City</td>
                        <td>@emp.CityName</td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" data-dismiss="modal" onclick="@(async()=>await DeleteEmployee(emp.EmployeeId))">Delete</button>
                <button data-dismiss="modal" class="btn">Cancel</button>
            </div>
        </div>
    </div>
</div>


@if (empList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Designation</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var emp in empList)
            {
                <tr>
                    <td>@emp.EmployeeId</td>
                    <td>@emp.EmployeeName</td>
                    <td>@emp.Gender</td>
                    <td>@emp.Designation</td>
                    <td>@emp.CityName</td>
                    <td>
                        <button class="btn btn-outline-dark" data-toggle="modal" data-target="#AddEditEmpModal" onclick="@(async ()=> await EditEmployee(emp.EmployeeId))">
                            <i class="fa fa-pencil-square-o"></i>
                        </button>
                        <button class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteEmpModal" onclick="@(async ()=>await DeleteConfirm(emp.EmployeeId))">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@functions
{
    List<Employee> empList = new List<Employee>();
    List<Cities> cityList = new List<Cities>();
    Employee emp = new Employee();
    string modalTitle { get; set; }
    string searchString { get; set; }

    protected override async Task OnInitAsync()
    {
        //try
        //{
        //    var foo = await Http.GetJsonAsync<List<Employee>>("/api/employees");
        //    await Http.SendJsonAsync(HttpMethod.Post, "/api/Employees/", new Employee()
        //    {
        //        EmployeeName = "vulcan",
        //        CityName = "Kaohsiug",
        //        Designation = "NN",
        //        Gender = "M"
        //    });
        //}
        //catch (Exception ex)
        //{
        //    Console.WriteLine(ex.Message);
        //}

        await GetEmployeeList();
        await GetCityList();
    }

    async Task GetCityList()
    {
        try
        {
            cityList = await Http.GetJsonAsync<List<Cities>>("/api/Cities");
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }

    async Task GetEmployeeList()
    {
        try
        {
            empList = await Http.GetJsonAsync<List<Employee>>("api/Employees/");
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }

    void AddEmployee()
    {
        emp = new Employee();
        this.modalTitle = "Add Employee";
    }

    async Task EditEmployee(int empID)
    {
        emp = await Http.GetJsonAsync<Employee>("/api/Employees/" + empID);
        this.modalTitle = "Edit Employee";
    }

    async Task SaveEmployee()
    {
        emp.CityName = "aaa";
        if (emp.EmployeeId != 0)
        {
            try
            {
                await Http.SendJsonAsync(HttpMethod.Put, "/api/Employees/"+emp.EmployeeId, emp);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }
        else
        {
            try
            {
                await Http.SendJsonAsync(HttpMethod.Post, "/api/Employees", emp);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }
        await GetEmployeeList();
    }

    async Task DeleteConfirm(int empID)
    {
        emp = await Http.GetJsonAsync<Employee>("/api/Employees/" + empID);
    }

    async Task DeleteEmployee(int empID)
    {
        await Http.DeleteAsync("/api/Employees/" + empID);
        await GetEmployeeList();
    }

    async Task SearchEmployee()
    {
        await GetEmployeeList();
        if (searchString != "")
        {
            empList = empList.Where(x => x.EmployeeName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) != -1).ToList();
        }
    }
    }